<template>
    <div class="footer">
        <div class=" main-width">
            <div class="footer-content">
                <div class="logo">
                    <div class="logo-img">
                        <img src="~@/assets/img/footer-logo.png" alt="">
                    </div>
                    <div class="address">
                        律所地址：{{ address }}
                    </div>
                </div>
                <div class="relation">
                    <div>单位：{{ org }}</div>
                    <div>办公地址：{{ address }}</div>
                    <div>电话（同微信）：{{ phone }}</div>
                    <div>邮箱：{{ email }}</div>
                    <div class="technical" @click="jumpWindowOpen" style="cursor: pointer">技术支持：北京郁林科技有限公司</div>
                </div>
                <div class="remark-content-main">
                    <div>备案号：{{ remarkInfo.aq }}</div>
                    <div>版权所有：{{ remarkInfo.bqsy }}</div>
                    <div>北京公安网络备案：{{ remarkInfo.bjaq }}</div>
                    <div @click="jumpWindowOpen" style="cursor: pointer">技术支持：北京郁林科技有限公司</div>
                </div>
            </div>
            <div class="remark-content">{{ remark }}</div>
        </div>
    </div>

</template>

<script>
export default {
    name: "footer",
    data() {
        return {
            address: "",
            remark: "",
            email: "",
            org: "",
            phone: "",
            remarkInfo: {
                aq: "",
                bqsy: "",
                bjaq: "",
            }
        }
    },
    methods:{
        jumpWindowOpen(){
            window.open('https://www.bjyulinkeji.com','_blank')
        }
    },
    async mounted() {
        let data = await this.$http.get("/index/info")
        this.address = data.aboutUs.address;
        this.remarkInfo.aq = data.aboutUs.aq;
        this.remarkInfo.bqsy = data.aboutUs.bqsy;
        this.remarkInfo.bjaq = data.aboutUs.bjaq;
        this.remark = `备案号：${data.aboutUs.aq}版权所有： ${data.aboutUs.bqsy} 北京公安网络备案 ${data.aboutUs.bjaq} `;
        this.email = data.aboutUs.email;
        this.org = data.aboutUs.bqsy;
        this.phone = data.aboutUs.mtPhone;
       // console.log(data.aboutUs);
    }
}
</script>

<style lang="less">
.footer {
    width: 100%;
    height: 260px;
    background: #3F3F3F;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .footer-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100px;
        .logo {
            width: 33%;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #FFFFFF;
            padding-right: 10%;
			font-size: 14px;
            .logo-img {
                width: 100%;
                img {
                    width: 100%;
                }
            }
        }

        .relation {
            width: 30%;
            display: flex;
			font-size: 14px;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            padding-left: 100px;
            .technical{
                display: none;
            }
        }

        .remark-content-main {
            width: 30%;
            height: 100%;
			font-size: 14px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

    }

    .remark-content {
        display: none;
    }
}
</style>
